<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: block;
        width: 200px;
        height: 200px;
        margin-bottom: 50px;
        border: 1px solid #bbb;
      }
      .box {
        width: 100%;
        height: 100%;
        opacity: .75;
      }
      #darkred {
        width: 900px;
        perspective: 600px
      }
      #darkred .box {
        width: 200px;
        background-color: darkred;
        perspective: 0;
        transform: rotateY(45deg);
      }

      #darkblue {
        width: 900px;
        height: 200px;
        perspective: 600px;
        overflow: visible;
        position: relative;
      }

      #darkblue .box {
        width: 200px;
        height: 200px;
        background-color: darkblue;
        transform: rotateY(45deg) ;
        perspective: 600px;
        overflow: visible;
        transform-style: preserve-3d;
      }

      #darkblue .box-b {
        width: 200px;
        height: 200px;

        /* 你先注掉这个样式，然后用chrome和firefox试试看两者显示有什么区别 */
        /* 之后在打开注释，在看看两个浏览器直接的区别 */
        /* version: chrome - 71.0.3578.98, firefox - 59.0.1 */
        /* transform: rotateY(0deg);  */
      }

      #darkblue .box-b-b {
        width: 200px;
        height: 200px;
        background-color: #6cf;

        transform: rotateY(45deg)  translate3d(20px, 0px, 0px);
      }

      #pink {
        width: 900px;
        perspective: 600px
      }

      #pink .box{
        width: 200px;
        background-color: pink;
        transform: translateX(30px);

        /*
        transform: translate3d(30, 40, 50);
        transform: rotateY(45deg) ;
        */
      }

    </style>
  </head>
<body>
  <section id="darkred" class="container">
    <div class="box"></div>
  </section>

  <section id="darkblue" class="container">
    <div class="box">
		<div class="box-b">
			<div class="box-b-b"></div>
		</div>
	</div>
  </section>

  <section id="pink" class="container">
    <div class="box"></div>
  </section>
</body>
</html>
